<!--设备实时卡片：操作开关组件-->
<template>
  <div style="height: 100%;">
    <Row :gutter="8" justify="start">
      <Col span="9" style="text-align: left">
        {{property.name}}
      </Col>
      <Col span="8" style="text-align: center">
        {{toggleStatus}}
      </Col>
      <Col span="7" style="text-align: right">
        <Switch size="large" :loading="loadingStatus" @on-change="change" :true-value="1" :false-value="0">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </Switch>
      </Col>
    </Row>
  </div>
</template>

<script>
  export default {
    name: 'ToggleLine',
    props: ['did', 'property'],
    created: function () {
      this.toggleStatus = this.property.value
      console.log('this.toggler', this.property)
    },
    data: function () {
      return {
        timer: 0,
        properties: [],
        toggleStatus: '',
        loadingStatus: false
      }
    },
    methods: {
      change (status) {
        this.loadingStatus = true
        window.myapi.do_post('iot/dev/switch',
          {did: this.did, pid: this.property.id, value: status}).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.$Notice.success({
              title: '操作成功'
            })
          } else {
            this.$Notice.warning({
              title: '操作有误',
              desc: resp.data.msg
            })
          }
        }).finally(() => {
          this.loadingStatus = false
        })
      }
    }
  }
</script>

<style scoped>

</style>
